<template>
  <!-- 朋友圈 否则信息列表 -->
  <div>
    <!-- 第二部分 搜索框和一个加号 -->
    <div class="two-class">
      <div class="input">
        <el-input
          :rows="0"
          autosize
          prefix-icon="el-icon-search"
          class="input-class"
          v-model="value"
          placeholder="请输入好友名"
        ></el-input>
        <el-button
          @click="dialogmethod"
          class="el-button-class"
          icon="el-icon-plus"
          circle
        ></el-button>
      </div>
    </div>

    <el-dialog
      title="添加好友"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="账号:">
          <el-input v-model="urUsername"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <center v-if="user.urName">
        <img :src="user.urAvatar" class="user-avatar-calss" />
      </center>
      <el-descriptions
        v-if="user.urName"
        direction="vertical"
        :column="4"
        border
      >
        <el-descriptions-item label="用户昵称">{{
          user.urName
        }}</el-descriptions-item>
        <el-descriptions-item label="用户账号">{{
          user.urUsername
        }}</el-descriptions-item>
        <el-descriptions-item label="邮箱" :span="2">{{
          user.urEmail
        }}</el-descriptions-item>
        <el-descriptions-item label="性别">
          {{ user.urSex == 0 ? "男" : "女" }}
        </el-descriptions-item>
        <el-descriptions-item label="注册时间">
          {{ user.createTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <el-button type="primary" @click="addUser">添加</el-button>
        </el-descriptions-item>
      </el-descriptions>
      <span v-if="isEnis">
        <el-empty description="没有查找到好丫 "></el-empty>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import user from "@/api/admin";
import { getUserId } from "@/utils/auth";
export default {
  data() {
    return {
      dialogVisible: false,
      value: "",
      isEnis: false,
      urUsername: "",
      user: {},
    };
  },
  created() {
  },
  methods: {
    /* 添加用户 */
    addUser() {
      user.addUser(getUserId(), this.user.urId).then((res) => {
        if (res.data.msg == "ok") {
          this.$message({
            message: "好友申请成功等待同意!",
            type: "success",
          });
          this.$emit("updateFriend", this.user.urId);
        } else {
          this.$message({
            message: res.data.msg,
            type: "info",
          });
        }
      });
    },
    /* 关闭 */
    handleClose() {
      this.dialogVisible = false;
      this.user = {};
      this.urUsername = "";
    },

    /* 查询 */
    onSubmit() {
      user.infourUsername(this.urUsername).then((res) => {
        if (res.data == undefined) {
          this.isEnis = true;
        } else {
            this.isEnis = false
          this.user = res.data.user;
        }
      });
    },
    dialogmethod() {
      this.dialogVisible = true;
    },
  },
};
</script>

<style>
.user-avatar-calss {
  width: 20%;
  border-radius: 50%;
}
</style>